83:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 85:T3482,[V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Github, Linkedin, Mail, Twitter } from "lucide-react" import Link from "next/link" import ContactForm from "./components/contact-form" import ProjectCard from "./components/project-card" import TechStack from "./components/tech-stack" export default function Page() { return (

John.dev

Full Stack Developer

Building digital experiences with modern technologies. Focused on creating elegant solutions to complex problems.

Projects

Tech Stack

Get in Touch

) } [V0_FILE]typescriptreact:file="app/components/project-card.tsx" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Github } from "lucide-react" import Image from "next/image" import Link from "next/link" interface ProjectCardProps { title: string description: string image: string link: string tags: string[] } export default function ProjectCard({ title, description, image, link, tags }: ProjectCardProps) { return (

{title}

{description}

{tags.map((tag) => ( {tag} ))}

View on GitHub ) } [V0_FILE]typescriptreact:file="app/components/tech-stack.tsx" import { Card } from "@/components/ui/card" const technologies = [ { category: "Frontend", skills: ["React", "Next.js", "TypeScript", "TailwindCSS", "Redux", "GraphQL"], }, { category: "Backend", skills: ["Node.js", "Express", "Python", "Django", "PostgreSQL", "MongoDB"], }, { category: "DevOps", skills: ["Docker", "AWS", "CI/CD", "Git", "Linux", "Nginx"], }, { category: "Tools", skills: ["VS Code", "Postman", "Figma", "Jest", "GitHub", "Vercel"], }, ] export default function TechStack() { return (

{technologies.map((tech) => (

{tech.category}

{tech.skills.map((skill) => ( {skill} ))}

))}

) } [V0_FILE]typescriptreact:file="app/components/contact-form.tsx" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useState } from "react" import { submitContactForm } from "../actions" export default function ContactForm() { const [pending, setPending] = useState(false) const [message, setMessage] = useState("") async function handleSubmit(formData: FormData) { setPending(true) try { const response = await submitContactForm(formData) setMessage(response.message) } catch (error) { setMessage("Something went wrong. Please try again.") } finally { setPending(false) } } return (

Name

Message

</div>
        <Button type="submit" className="w-full" disabled={pending}>
          {pending ? "Sending..." : "Send Message"}
        </Button>
        {message && <p className="text-sm text-center mt-4 text-muted-foreground">{message}</p>}
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/actions.ts"
"use server"

export async function submitContactForm(formData: FormData) {
  // Simulate a delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const name = formData.get("name")
  const email = formData.get("email")
  const message = formData.get("message")

// Here you would typically send an email or save to a database
  console.log("Form submission:", { name, email, message })

return {
    message: "Thanks for your message! I'll get back to you soon.",
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Import React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "John.dev - Full Stack Developer",
  description: "Full stack developer portfolio showcasing projects and skills",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

return (
    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
7c:["$","$L83",null,{"chatId":"XlcoeO3Y4eb","children":["$","$L84",null,{"data":{"@\"active-block\",\"XlcoeO3Y4eb\",":{"id":"b_nRFVP3oeKo0","messageId":"BrYgbDveXj6rxLn6LPcsPLiaXeyDakkX","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"portfolio","type":"code-project","project":"portfolio"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"XlcoeO3Y4eb\",":false,"":null},"children":"$L86"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This